<template>
  <div class="query-conatiner">
    <div class="playImte-header">
      <span class="title">缴费历史</span>
    </div>
    <div class="playImte-table scrollbar">
      <table v-if="pendingList.length >0">
        <tr>
          <td style="width:15%;">
            <div class="table-title">订单编号</div>
          </td>
          <td style="width:20%;">
            <div class="table-title">缴费项目</div>
          </td>
          <td style="width:10%;">
            <div class="table-title">缴费人</div>
          </td>
          <td style="width:15%;">
            <div class="table-title">缴费机构</div>
          </td>
          <td style="width:10%;">
            <div class="table-title">缴费时间</div>
          </td>
          <td style="width:15%;">
            <div class="table-title">支付金额</div>
          </td>
          <td style="width:15%;">
            <div class="table-title">操作</div>
          </td>
        </tr>
        <tr v-for="(item,index) in pendingList" :key="index">
          <td>
            <div class="table-info">{{item.zfddh}}</div>
          </td>
          <td>
            <div class="table-info">{{item.zfxxms}}</div>
          </td>
          <td>
            <div class="table-info">{{item.xm}}</div>
          </td>
          <td>
            <div class="table-info">{{item.fyjg}}</div>
          </td>
          <td>
            <div class="table-info">{{item.jssj}}</div>
          </td>
          <td>
            <div class="table-info">
              <p style="padding:4px 0;">支付金额：¥{{ item.zfje }} 元</p>
              <p style="padding:4px 0;">统筹支付：¥{{ item.htdwzf }} 元</p>
              <p style="padding:4px 0;">个人支付：¥{{ item.grzf }} 元</p>
            </div>
          </td>
          <td>
            <div class="table-info" style="color:blue" @click="getDetail(item,1)">查看</div>
            <div class="table-info" style="color:blue" @click="getDetail(item,2)">打印凭证</div>
          </td>
        </tr>
      </table>
      <empty v-if="pendingList.length == 0" />
    </div>
    <v-back></v-back>
    <go-home></go-home>
    <el-dialog title="缴费详情" :visible.sync="editVisible" width="80%" :close-on-click-modal="false">
      <div class="playImte-table scrollbar">
        <table v-if="detailList.length >0">
          <tr>
            <td style="width:20%;">
              <div class="table-title">缴费项目</div>
            </td>
            <td style="width:25%;">
              <div class="table-title">科室名称</div>
            </td>
            <td style="width:10%;">
              <div class="table-title">费用单价</div>
            </td>
            <td style="width:20%;">
              <div class="table-title">数量</div>
            </td>
            <td style="width:10%;">
              <div class="table-title">费用金额</div>
            </td>
          </tr>
          <tr v-for="(item,index) in detailList" :key="index">
            <td>
              <div class="table-info">{{item.xmmc}}</div>
            </td>
            <td>
              <div class="table-info">{{item.ksmc}}</div>
            </td>
            <td>
              <div class="table-info">¥{{item.fydj}} 元</div>
            </td>
            <td>
              <div class="table-info">{{item.sl}}</div>
            </td>
            <td>
              <div class="table-info">¥{{item.fyje}} 元</div>
            </td>
          </tr>
        </table>
        <empty v-if="detailList.length == 0" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="editVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <plugin-hiprint :spring-info="springInfo" />
    <div class="back-home-times">{{backTime}}S</div>
  </div>
</template>
  
  <script>
import vBack from '@/components/mainHeader/Back.vue';
import pluginHiprint from '@/components/pluginHiprint/PluginHiprint.vue';
import goHome from '@/components/mainHeader/GoHome.vue';
import printJS from 'print-js';
export default {
  components: { vBack,pluginHiprint,goHome},
  data() {
    return {
      pendingList: [],
      playTotal: 0,
      isPalySuccess: false,
      modelShow: false,
      loading: false,
      countdown: 15,
      editVisible: false,
      detailList: [],
      springInfo: {},
      grid:'',
      backTime:60
    };
  },
  created() {
    this.grid = this.$route.query.grid;
    console.log('this.gridthis.gridthis.grid',this.grid);
    this.initMethod();
    this.getUserInfo();
    this.goBackHome();
  },
  methods: {
    initMethod() {
      this.$http.get(this.$API.GET_HISTORY, { grid: this.grid }).then((res) => {
        console.log('已缴费', res);
        if (res.code == 200) {
          let list = Array.isArray(res.data) ? res.data : [];
          this.pendingList = list;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getUserInfo() {
      this.$http
        .get(this.$API.GET_USERINFO, { grid: this.grid })
        .then((res) => {
          if (res.code == 200) {
            this.userInfo = res.data || {};
          }
        });
    },
    getDetail(item,flag) {
      const loading = this.$loading({ text: '加载中...' });
      this.$http
        .get(this.$API.GET_PLAYOK_DETAIL, { grid: this.grid, zfddid: item.zfddid })
        .then((res) => {
          console.log('详情', res);
          if (res.code == 200) {
            this.detailList = Array.isArray(res.data) ? res.data : [];
            if(flag == 1){
              this.editVisible=true;
            }else if(flag == 2){
              this.springInfo = {
                pendingList: this.detailList,
                name: item.xm,
                jsdh: item.jsdh,
                zfddh: item.zfddh,
                sex: this.userInfo.xb,
                csrq: this.userInfo.csrq,
                total: item.zfje,
                ybtczf:item.htdwzf,
                ybgrzf:item.grzf,
                grid: item.grid,
                jfsj: item.jssj
              };
              setTimeout(()=>this.spingMethod(),500)
            }
          } else {
            this.$message.error(res.msg);
          }
          loading.close();
        })
        .catch((err) => {
          loading.close();
        });
    },
    spingMethod() {
      printJS({
        printable: 'print-area',
        type: 'html',
        maxWidth: '100%',
        style: '@page { size: auto;  margin: 0mm;font-family: "Microsoft YaHei"}',
        scanStyles: false,
        documentTitle: '账单打印',
        targetStyles: ['*'],
      });
    },
    goBackHome(){
      this.backTime=60;
      this.timerHome=setInterval(()=>{
        if(this.backTime == 1){
          clearInterval(this.timerHome);
          this.$router.replace('/');
        }
        this.backTime--
      },1000)
    },
  },
  destroyed() {
    clearInterval(this.timerHome);
  },
};
</script>
  
  <style lang="less">
.query-conatiner {
  width: 100%;
  height: 100%;
  position: relative;
  background: #efeff4;
  .el-dialog__title{
    font-size: 30 * @hv;
  }
  .el-button--medium{
    font-size: 26 * @hv;
  }
  .playImte-header {
    height: 12%;
    background: linear-gradient(to bottom, #4a8ad0, #75a3d1);
    display: flex;
    align-items: center;
    justify-content: center;
    .title {
      font-size: 80 * @hv;
      color: #fff;
    }
  }
  table {
    border-collapse: collapse;
  }
  table,
  th,
  td {
    border: 1px solid #888;
  }
  .playImte-table {
    display: flex;
    justify-content: center;
    padding-top: 30 * @hv;
    height: 70vh;
    align-items: flex-start;
    table {
      width: 90%;
    }
    .table-title {
      padding: 20 * @hv 15 * @wv;
      font-size: 28 * @hv;
      color: #333;
      text-align: center;
      font-weight: bold;
    }
    .table-info {
      padding: 20 * @hv 15 * @wv;
      font-size: 24 * @hv;
      color: #555;
    }
  }
  .playImte-button-group {
    display: flex;
    justify-content: center;
    padding-top: 30 * @hv;
    .playImte-button {
      width: 60%;
      height: 120 * @hv;
      font-size: 38 * @hv;
      background: #4a8ad0;
      color: #fff;
      text-align: center;
      line-height: 120 * @hv;
      border-radius: 120 * @hv;
    }
  }
  .table-title1 {
    padding: 20 * @hv 15 * @wv;
    font-size: 28 * @hv;
    color: #333;
    text-align: right;
    font-weight: bold;
  }
  .table-info1 {
    padding: 20 * @hv 15 * @wv;
    font-size: 28 * @hv;
    color: #555;
  }
}
</style>
  